<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title><style type="text/css">
			body{
				width: 1300px;
				margin: 0px;
				padding: 0px;
				background-image: linear-gradient(to top,pink,red);
			}
			#header{
				width: 1300px;
				margin: 0px;
				padding: 0px;
			}
			#logo{
				width: 190px;
				margin: 0px;
				padding: 0px;
				float: left;
			}
			#logo img{
				width: 300px;
				height: 120px;
				border-radius: 10px 10px 10px 10px;
				opacity: 0.8;
			}
			#nav{
				height: 46px;
				font-size: 12px;
				margin: 0px;
				padding-top: 83px;
				width: 900px;
				float: right;	
			}
			#nav input{
					border-radius: 10px 10px 10px 10px;
					cursor: pointer;
				}
			#nav a{
            	width: 50px;
				height: 10px;
				padding: 15px;
				border: 5px none darkred;
				border-radius: 10px 10px 10px 10px;
				text-decoration: none;
				color: white;
			}
			 a:link,a:visited{
				font-family: "宋体";
				font-size: 20px;
				color: darkred;
				text-decoration: none;
			}
			#nav a:hover{
				font-family: 宋体;
				transition-duration:1s;
				background-color: darkred;
				
			}
			#box1{
				
				width:1300px;
				height:2430px;
			}
			#box2{
				width: 1300px;
				height: 130px;
				border: 60px 60px;
				box-shadow: 10px 10px 30px gray;
				background:rgba(255,255,255,0.2);
				}
				/*第一个小盒子图片与字体排序*/
			#box3{
				width: 1260px;
				height: 500px;
				border: 60px 60px;
				margin: 20px;
				box-shadow: 10px 10px 30px gray;
				background:rgba(255,255,245,0.4);
				
			}
			#box3 li{
				float: left;
				font-size: 25px;
				padding-top: 20px;
				padding-left: 10px;
				list-style-type: none;
			}
			img:hover{
				transform: rotateZ(360deg);
				transition-duration:2s;
			}
			#box3 a:hover{
				font-family: "arial narrow";
				color: red;
				font-size: 25px;
				margin: 20px;
			}
			/*第二个视频与图片*/
			#box4{
				width: 1260px;
				height: 730px;
				border: 60px 60px;
				margin: 20px;
				box-shadow: 10px 10px 30px gray;
				background:rgba(255,255,225,0.5);
			    
			}
			/*第三个关于表格*/
			#box5{
				padding-left: 50px;
				width: 1260px;
				height: 500px;
				border: 60px 60px;
				margin: 20px;
				box-shadow: 10px 10px 30px gray;
				background:rgba(255,255,210,0.5);
				
			}
			#box8{
				width: 160px;
				height: 20px;
				padding: 15px;
				border: 5px solid indianred;
				border-radius: 10px 10px 10px 10px;
			}
			#box8:hover{
				transition-duration:1s;
				background-color: indianred;
				}
			#box9{
				width: 280px;
				height: 20px;
				padding: 15px;
				border: 5px solid indianred;
				border-radius: 10px 10px 10px 10px;
			}
			#box9:hover{
				transition-duration:1s;
				background-color: indianred;
				}
			/*#box5 table{
				border-radius: 10px 10px 10px 10px;
				font-family: "微软雅黑";
			}*/
			#cc li{
				float: left;
				list-style-type: none;
				margin-left: 40px;
			}
			/*第四个小盒子关于表单*/
			#box6{
				width: 1260px;
				height: 470px;
				border: 60px 60px;
				margin: 20px;
				box-shadow: 10px 10px 30px green;
				background:rgba(255,255,195,0.5);
				padding-left: 30px;
			}
			#box7{
				width: 1200px;
				height: 35px;
				padding: 15px;
				border: 5px solid indianred;
				border-radius: 10px 10px 10px 10px;
			}
			#box7:hover{
				transition-duration:1s;
				background-color: indianred;
				}
			/*页脚*/
			#footer{
				clear: both;
				width: 1300px;
				margin: 0px;	
				background: lightblue;
				height: 80px;
			}
			#bg1{
				padding: 25px;
				font-family: "微软雅黑";
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<!--头部的设置-->
		<header id="header">
			<section id="logo">
				<img src="zhu.PNG" />
			</section>
			<nav id="nav">
				<span><font size="5" ">
				<a href="">发现音乐</a>
				<a href="">我的音乐</a>
				<a href="">音乐人</a>
				<a href="">朋友</a>
				<a href="">商城</a>
				<input type="text"placeholder="音乐/视频/用户" />
				<input type="submit"value="搜索" />
				<input type="submit"value="注册" />
				<input type="submit"value="登录" />
			</font></span>
			</nav>
		</header>	
		<!--整体的大盒子-->
		<div id="box1" >
			<div id="box2">	
			</div>
			<!--对字体的设置以及图片-->
			<div id="box3">	
				<ul>
					<li><a href=""><font size="7"><b><u>热门推荐</u></b></font></li><br />
				    <li><a href=""><b>华语|</b></a></li>&nbsp;
					<li><a href=""><b>流行|</b></a></li>&nbsp;
					<li><a href=""><b>摇滚|</b></a></li>&nbsp;
					<li><a href=""><b>民谣|</b></a></li>&nbsp;
					<li><a href=""><b>电子</b></a></li>&nbsp;
				</ul>
				<br /><br /><br />
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<a href=""><img src="0005 (2).jpg" title="Le courage d'aimer: Noël" /></a>
				&nbsp;&nbsp;&nbsp;
				&nbsp;&nbsp;&nbsp;
				<a href=""><img src="0005 (1).jpg"title="the rose"/></a>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<a href=""><img src="0004 (1).jpg"title="假如爱有天意"/></a>
				
			</div>
			<!--第二个小盒子视频与图片旋转-->
			<div id="box4">
				<div align="center"><br />
					 <h1>新碟上架:</h1><hr /> <br />
				<img src="0001.jpg" />
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<img src="00002.jpg" />
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<img src="00003.jpg" /></div><br />
				<div align="center">
					<h1><b>MV</b></h1><hr /><br />
					<video width="380px"controls="controls" poster="王菲 - 乘客999_00.00.27.jpg">
				<source src="王菲 - 乘客999.mp4" type="video/mp4"></source>
				</video>
				</div>
			</div> 
			<!--第三个小盒子关于表格-->
			<div id="box5">
				<h1><i>我的榜单：</i></h1>
				<table width="720px"border="2"height="330px">
					<tr bgcolor="darkred">
						<th>最近播放</th>
						<th>我的喜欢</th>
						<th>和cannon</th>
					</tr>
					<tr>
						<td><a href="">1.the rose</a></td>
						<td><a href="">1.红豆曲+一生所爱</a></td>
						<td rowspan="2"><a href="">1.Canon in D (Violin, Cello & Harp)</a></td>
					</tr>
					<tr>
						<td><a href="">2.Le courage d'aimer: Noël</a></td>
						<td><a href="">2.my jinji</a></td>
					</tr>
					<tr>
						<td><a href="">3.花事了</a></td>
						<td><a href="">3.the sound of silence</a></td>
						<td><a href="">2.always with me</a></td>
					</tr>
					<tr>
						<td><a href="">4.小黑</a></td>
						<td><a href="">4.乘客</a></td>
						<td><a href="">3.the rain</a></td>
					</tr>
					<tr>
						<td><a href="">5.水中花+La Vie En Rose</a></td>
						<td><a href="">5.听妈妈的话</a></td>
						<td><a href="">4.your Eyes</a></td>
					</tr>
				</table>
				<div id="cc">
					<ul>
				  <li><a href="">
					<div id="box8">
						<font size="4"><center>全部播放</center></font>
				    </div>
				      </a>
				  </li>
				  <li>
				<a href="">
					<div id="box9">
						<font size="4"><center>点击即可查看与你兴趣相识的听友</center></font>
				    </div>
				</a>
				  </li>
					</ul>
				</div>
				<!--
				
				<a href="">
				<table height="60px"width="160px"border="1px">
					<tr>
						<td align="center"><font size="4"><b>全部播放</b></font></td>
					</tr>
				</table>
				</a>
				  </li>
				  
				  <li>
				<a href="">
				<table height="50px"width="260px"border="1px">
					<tr>
						<td align="center"><font size="4"><b>点击即可查看与你兴趣相识的听友</b></font></td>
					</tr>
				</table>
				</a>
				  </li>
				</ul>
			 </div>-->
			</div>
			<!--第四个小盒子关于表单-->
			<div id="box6">  
				<p><font size="5" color="darkred"><br />这里有一份参加抽奖的活动，填写以下信息即可参与：</font></p><br />
				<form align="center" >
					请输入邮箱地址:      &nbsp;&nbsp;&nbsp;
					<input type="text"placeholder="格式如xxx@xx.com" /><br />
			             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;             
				              请输入密码:	   &nbsp;&nbsp;&nbsp;
				        <input type="password"value="password"minlength="6" title="最少要输入六位"/><br />    
					     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					        请重复密码：       &nbsp; <input type="password"value="password" minlength="6"/><br />
					                  性别：       &nbsp;&nbsp;&nbsp;&nbsp;
					                  <input type="radio"name="gender"value="woman" />女
					                   <input type="radio"name="gender"value="man" />男<br />
					           
					                  城市：    &nbsp;&nbsp;&nbsp;&nbsp;
					                  <select name="city" size="2">
					                  	<option value="beijing">北京</option>
					                  	<option value="shanghai">上海</option>
					                  	<option value="hefei">合肥</option>
					                  	<option value="nanjing">南京</option>
					                  	<option value="shengzhen">深圳</option>
					                  </select>     <br />      
					    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					                  爱好：  &nbsp;
					                  <input type="checkbox"name="m1"value="sport" />运动
					                  <input type="checkbox"name="m2"value="art" />艺术
					                  <input type="checkbox"name="m3"value="science" />科学<br />
					    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					           个人描述：      &nbsp;   <textarea name="say"rows="5"cols="60" ></textarea><br />
					
				</form><br />
				<a href="">
					<div id="box7">
						<font size="6"><center>提交</center></font>
				    </div>
				</a>
		    </div>
		</div>  
		<div align="center"> 
		<footer id="footer">
		 <section id="bg1">
		 	版权所有
		 </section>
		</footer> </div>
	</body>
</html>
